import React, { Component } from 'react';
import DrawingCanvas from './drawing-canvas/drawing-canvas';
import ToolPalette from './tool-palette/tool-palette';
import './app.scss';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            brushColor: '#000000',
            brushSize: 4,
            brushType: 'MARKER',
        };
    }

    changeBrushColor = color => {
        this.setState({
            brushColor: color,
        });
    };

    changeBrushType = type => {
        console.log(type);
        this.setState({
            brushType: type,
        });
    };

    render() {
        return (
            <div className='app'>
                <DrawingCanvas
                    fontColor={this.state.brushColor}
                    brushType={this.state.brushType}
                />
                <ToolPalette
                    toolColor={this.state.brushColor}
                    changeBrushColor={this.changeBrushColor}
                    changeBrushType={this.changeBrushType}
                />
            </div>
        );
    }
}

export default App;
